<template>
  <div class="component work-header row between-span middle-span">
    <div class="col-span row middle-span header-container">
      <nav-info class="nav-info"></nav-info>
      <div class="work-container row col-span end-span">
        <work-seater/>
        <work-task></work-task>
        <work-message :isLegalMessage="false"></work-message>
        <work-message-legal :isLegalMessage="true"></work-message-legal>
        <work-user></work-user>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import WorkUser from "~/components/workspace/work-user.vue";
import WorkBreadcrumb from "~/components/workspace/work-breadcrumb.vue";
import WorkMessage from "~/components/workspace/work-message.vue";
import WorkMessageLegal from "~/components/workspace/work-message-legal.vue";
import WorkTask from "~/components/workspace/work-task.vue";
import { State, Mutation } from 'vuex-class';
import NavInfo from "~/components/workspace/header/nav-info.vue"
import WorkSeater  from "./work-seater.vue"

@Component({
  components: {
    WorkUser,
    WorkTask,
    WorkMessage,
    WorkBreadcrumb,
    NavInfo,
    WorkMessageLegal,
    WorkSeater
  }
})
export default class WorkHeader extends Vue {
  @State('menuCollapse') private mMenuCollapse;
  @Mutation private updateMenuCollapse;

  private get menuCollapse() {
    return this.mMenuCollapse;
  }

  private set menuCollapse(value) {
    this.updateMenuCollapse(value);
  }
}
</script>

<style lang="less" scoped>
.component.work-header {
  .logo {
    flex-basis: 200px;
  }
  .nav-info {
    flex-basis: 400px;
    padding-left: 10px;
  }

  .header-container {
    height: 60px;
    // border-bottom: 1px solid #f2f2f2;
    box-shadow: 2px 2px 2px #d1d0d0;
    padding: 0;
  }
}
.icon-style {
  font-size: 30px;
  color: #333;
}
.col-padding {
  padding-left: 10px;
}
</style>
